
<template>
  <div v-if="customData.visible" class="orderDetails">
    <el-dialog
      id="dialogBox"
      title="退款申请详情"
      width="50%"
      top="2vh"
      :visible.sync="customData.visible"
      :before-close="hide"
      @close="hide"
    >
      <div class="plate-box">
        <div class="plate-title"><span />退款商品</div>
        <el-table
          :data="customData.tableData"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          style="width: 100%; border: 1px solid #f3f3f3"
          :summary-method="getSummaries"
          show-summary
          max-height="300"
        >
          <el-table-column prop="displayUrl" label="商品图片" width="100px">
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.displayUrl != undefined &&
                    scope.row.displayUrl != null &&
                    scope.row.displayUrl != ''
                "
                class="display-img"
              >
                <img
                  :src="scope.row.displayUrl"
                  alt=""
                  style="max-width: 100%; max-height: 100%"
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="itemName" label="商品名称" />
          <el-table-column label="价格/货号">
            <template slot-scope="scope">
              <div>{{ "价格: ￥" + scope.row.itemPriceDouble }}</div>
              <div>{{ "货号:" + scope.row.skuCode }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="itemPrice" label="属性" /> -->
          <el-table-column prop="itemCount" label="数量" />
          <el-table-column prop="totalPriceDouble" label="小计" />
        </el-table>
      </div>
      <div class="plate-box">
        <div class="plate-title"><span />服务单信息</div>
        <div class="descriptions-box">
          <el-descriptions title="" :column="2" border>
            <el-descriptions-item
              label="服务单号"
            >77777777777</el-descriptions-item>
            <el-descriptions-item label="申请状态">{{ refundStatusObj[serviceOrderInformation.refundStatus] }}</el-descriptions-item>
            <el-descriptions-item label="订单编号">
              {{ serviceOrderInformation.orderNo }}
            </el-descriptions-item>
            <el-descriptions-item label="申请时间">
              {{ serviceOrderInformation.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="用户账号">
              {{ serviceOrderInformation.userAccount }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="descriptions-box">
          <el-descriptions title="" :column="2" border>
            <el-descriptions-item
              label="订单金额"
            > ￥{{ serviceOrderInformation.payAmountDouble }}</el-descriptions-item>
            <el-descriptions-item label="确认退款金额"> ￥{{ serviceOrderInformation.refundAmountDouble }}</el-descriptions-item>
            <el-descriptions-item label="退款方式">
              {{ refundMethodObj[serviceOrderInformation.refundMethod] }}
            </el-descriptions-item>
            <el-descriptions-item label="退款原因">
              {{ serviceOrderInformation.refundReason }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="descriptions-box">
          <el-descriptions title="" :column="2" border>
            <el-descriptions-item
              label="审核原因"
            >
              <el-input v-model="parameterData.name" />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="handleConfirm(2)"> 确认退款 </el-button>
        <el-button type="danger" @click="handleConfirm(1)"> 拒绝退款 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import _validate from '@/framework/commonJs/wptx_validate'
import _api from '@/framework/API/order'
export default {
  filters: {},
  data() {
    return {
      customData: {
        visible: false,
        tableData: [
          // {
          //   displayUrl: '',
          //   skuCode: '苹果',
          //   itemName: '1234',
          //   itemPrice: '',
          //   itemStock: '3',
          //   upcCode: '24'
          // },
          // {
          //   displayUrl: '',
          //   skuCode: '苹果',
          //   itemName: '1234',
          //   itemPrice: '',
          //   itemStock: '3',
          //   upcCode: '24'
          // },
          // {
          //   displayUrl: '',
          //   skuCode: '苹果',
          //   itemName: '1234',
          //   itemPrice: '',
          //   itemStock: '3',
          //   upcCode: '24'
          // }
        ],
        detailsData: {},
        parameterData: {
          name: ''
        }
      },
      parameterData: {
        name: ''
      },
      serviceOrderInformation: {}, // 服务单信息集合
      incomePriceDouble: '', // 商品价格合计
      refundStatusObj: {// 申请状态
        '0': '申请退款',
        '1': '退款中',
        '2': '退款成功',
        '3': '退款失败',
        '4': '完成'
      },
      refundMethodObj: {// 退款方式
        '0': 'app退款',
        '1': '线上退款',
        '2': '现金退款'
      }
    }
  },
  computed: {},
  created() { },
  mounted() { },
  beforeDestroy() { },
  methods: {
    show(data) {
      console.log(data, '这是详情')
      const self = this
      self.customData.visible = true
      self.detailsData = data
      console.log('1111', data.id)
      this.orderDetailsProduct(data.id, data.orderId)
      this.orderDetailsReturn(data.orderId)
    },
    hide() {
      const self = this
      self.$parent.onInit()
      self.parameterData.name = ''
      self.customData.visible = false
    },
    headerCellStyle(row, column, rowIndex, columnIndex) {
      return { background: '#f5f7fa', borderBottom: '1px solid #EBEEF5' }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return { borderBottom: '1px solid #EBEEF5' }
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        // sums[columns.length - 1] = '￥12334元'
        sums[columns.length - 1] = '￥' + this.incomePriceDouble + '元'
        // const values = data.map(item => Number(item[column.property]));
        // if (!values.every(value => isNaN(value))) {
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        //   sums[index] += ' 元';
        // } else {
        //   sums[index] = 'N/A';
        // }
      })

      return sums
    },
    onInfo(data) {
      const self = this
      self.$router.push({
        path: '/item/itemDetail',
        query: {
          itemId: data.itemId,
          itemVersionId: data.versionId,
          productType: data.productType
        }
      })
    },
    // 确认退款 拒绝退款
    handleConfirm(code) {
      const self = this
      const { id, orderId } = self.detailsData
      console.log('取值userID', self.$store.getters.userIdN)
      const params = {
        id: id,
        orderId: orderId,
        refundType: 1, // 退款类型(0:部分退款，1:全部退款)",   先默认传全部
        reviewReason: self.parameterData.name,
        reviewStatus: code,
        reviewBy: self.$store.getters.userNameN,
        reviewByUserId: self.$store.getters.userIdN
      }
      _api.approveRefund(self, params, self.callBack_approveRefundDesc,)
      // approveRefund(params).then((res) => {
      //   if (res.code === 200) {
      //     this.$message.success('审核完成！')
      //     this.hide()
      //   } else {
      //     this.$message.warning(res.msg)
      //     this.hide()
      //   }
      // })
    },
    callBack_approveRefundDesc(data) {
      const self = this
      console.log('退款按钮操作', data)
      if (res.code === 200) {
        this.$message.success('审核完成！')
        this.hide()
      } else {
        this.$message.warning(res.msg)
        this.hide()
      }
    },
    // handleExamine() {
    //   const params = {
    //     businessNo: this.dataForm.businessNo,
    //     reviewReason: this.dataForm.reviewReason,
    //     reviewStatus: 1
    //   }
    //   approveRefund(params).then((res) => {
    //     if (res.code === 200) {
    //       this.$message.success('审核完成！')
    //       this.hide()
    //     } else {
    //       this.$message.warning(res.msg)
    //       this.hide()
    //     }
    //   })
    // },
    // 商品信息查询
    orderDetailsProduct(id) {
      const self = this
      console.log(id)
      const params = {
        id: id
      }
      _api.orderInfoDetailData(self, params, self.callBack_productDesc,)
    },
    callBack_productDesc(data) {
      console.log('这是查询详情接口')
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '获取超时，请稍后重试', 'warning')
      } else {
        self.customData.tableData = data.data.orderItemInfoEntitieList
        self.incomePriceDouble = data.data.incomePriceDouble
      }
    },
    // 退货详情信息
    orderDetailsReturn(orderId) {
      const self = this
      console.log(orderId)
      const params = {
        orderId: orderId
      }
      _api.getPayRefundById(self, params, self.callBack_returnDesc,)
    },
    callBack_returnDesc(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '获取超时，请稍后重试', 'warning')
      } else {
        self.serviceOrderInformation = data.data
      }
    }
  }
}
</script>
<style scoped>
.plate-box {
  margin-bottom: 10px;
}
.plate-title {
  margin-bottom: 10px;
}
.plate-title span {
  display: inline-block;
  width: 5px;
  height: 18px;
  background: rgb(33, 52, 160);
  margin-right: 10px;
  vertical-align: bottom;
}
.plate-box .descriptions-box{
  margin-top: 15px;
}
::v-deep.orderDetails .el-table__footer-wrapper tbody td {
  border-bottom: none !important;
  color: red !important;
}
</style>
